<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>百日无违章登陆</title>
</head>
<style>
    html,body{
        width:100%;
        height:100%
    }
    body{
        margin: 0;
        padding: 0;
        background: linear-gradient(#67b6ff,#d2e9ff);
    }
    .title{
        width: 100%;
        text-align: center;
        height: 10rem;
        line-height: 10rem;
        margin: 0 auto;
        color: #fff;
        letter-spacing:0.5rem;
        font-weight: bolder;
    }
    .bairi{
        font-size: 3rem;
        /*padding-left: 0.7rem;*/
    }
    .rank{
        font-size: 25px;
    }
    .a-table{
        margin: 0 auto;
        width: 90%;
        padding: 1rem ;
    }
    .a-tr{
        height:1.3rem;
        border-bottom: 0.5px solid #e4e4e4;
        display: block;
        padding: 1rem 0.5rem 1.5rem 0.5rem;
    }
    .a-td{
        padding: 0.2rem 0.5rem 0 0;
        width: 10%;
        height:0.9rem ;
        border-right: 2px solid #1296db;
    }
    .input-on{
        /*margin: 0 0 0 1rem;*/
        width: 100%;
        height:2rem;
        border: none;
        outline:none;
        font-size: 15px;
        border-radius: 5px;
    }
    button{
        width: 80%;
        margin-left: 10%;
        height: 2rem;
        border-radius: 5px;
        border: 1px solid #3598db;
        font-size: 16px;
        outline: none;
    }
    .return{
        background-color: #fff;
        color: #3598db;
        margin-top: 1rem;
    }
    text{
        color:#7d7d7d;
        margin-left: 1rem
    }
    select{
        border:none;
        /*appearance:none;*/
        /*-moz-appearance:none;*/
        /*-webkit-appearance:none;*/
        /*-ms-appearance:none;*/
        width:2.5rem;
        height: 2.2rem;
        border-radius: 5px;
        background:#fff;
        color:#666;
        /*margin-left:1rem ;*/
        outline:none;
        font-size: 15px;
    }
    .car{
        position:fixed;
        bottom: 0;
        z-index: -1;
    }
    /*和enroll css样式不一样的地方*/
    #login{
        background-color: #3598db;
        color: #fff;
    }
</style>
<body>
<div style="height: 10rem;">
    <div class="title">
        <span class="bairi">百日</span><span class="rank">无违章</span>
    </div>
</div>
<form action="" method="post" id="enrollform">
    <table class="a-table">
        <tr class="a-tr">
            <td class="a-td"><img src="../../../resource/img/func.png" height="25" width="25"/></td>
            <td>
                <select>
                    <option selected="selected">鲁</option>
                    <option value="京">京</option>
                    <option value="津">津</option>
                    <option value="沪">沪</option>
                    <option value="渝">渝</option>
                    <option value="冀">冀</option>
                    <option value="豫">豫</option>
                    <option value="云">云</option>
                    <option value="辽">辽</option>
                    <option value="黑">黑</option>
                    <option value="湘">湘</option>
                    <option value="皖">皖</option>
                    <option value="新">新</option>
                    <option value="苏">苏</option>
                    <option value="浙">浙</option>
                    <option value="赣">赣</option>
                    <option value="晋">晋</option>
                    <option value="蒙">蒙</option>
                    <option value="陕">陕</option>
                    <option value="吉">吉</option>
                    <option value="闽">闽</option>
                    <option value="贵">贵</option>
                    <option value="粤">粤</option>
                    <option value="青">青</option>
                    <option value="藏">藏</option>
                    <option value="川">川</option>
                    <option value="宁">宁</option>
                    <option value="琼">琼</option>
                </select>
            </td>
            <td><input class="input-on" style="margin-left: 0;" type="text" placeholder="请输入车牌号"></td>
        </tr>
    </table>
</form>
<button type="submit" id="login" class="login" >登陆</button>
<a href="index.html"><button id="return" class="return">返回</button></a>
<div>
    <img src="../../../resource/img/car.png" class="car" width="100%;"/>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script>
    $(function () {
            $("#return").click(function(){
                $(this).css({'background-color':'#218cd5'});
            });
            $("#login").click(function(){
                console.log("点击登陆");
                $(this).css({'background-color':'#218cd5'});
                $(location).attr("href","ranklist.html");
            });
    });
</script>
</html>